<!--
 * @Autor: zengy
 * @Date: 2021-07-14 10:49:35
 * @LastEditors: zengy
 * @LastEditTime: 2021-10-15 10:19:47
 * @Description: 菜单页
 * @FilePath: \m_t\src\views\index.vue
-->
<template>
  <div class="container">
    <h1>H5菜单页</h1>
    <div v-for="(route, k) in routes" :key="k" class="menu">
      <p class="sub-title">{{ k }}</p>
      <ul class="menu">
        <template v-for="v in route">
          <li :key="v.name" v-if="v.meta">
            <router-link target="_blank" :to="v.path">
              <span class="name">{{ v.meta.name }}</span>
            </router-link>
            <span class="url">{{ `${href}${v.path}` }}</span>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script setup>
window.__RATIO = 192;
import { onMounted, ref, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
let routes = ref([]);
const href = ref(location.href.replace(/(.*#)(.*)/, '$1'));
onMounted(() => {
  let menu = proxy.$router.options.routes;
  let list = {};
  menu.forEach((v) => {
    if (v.meta) {
      let str = v.meta.name.split('-')[0];
      if (list[str]) {
        list[str].push(v);
      } else {
        list[str] = [v];
      }
    }
  });
  routes.value = list;
});
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background: #030d20;
  color: #fff;
  a {
    color: #fff;
  }
}
h1 {
  line-height: 60px;
  font-size: 30px;
  text-align: center;
  border-bottom: 1px solid yellow;
}
.menu{
  background: #030d20;
  .sub-title{
    font:bold 24px Microsoft Yahei;
    line-height:40px;
    color:rgb(209, 230, 24);
  }
}

li {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  &:hover {
    background: rgb(122, 229, 236);
    color: #000;
    a {
      color: #000;
    }
  }
}
</style>